<div class="bg-light lter b-b wrapper-md">
    <h1 class="m-n font-thin h3">批量导入</h1>
</div>
<div class="wrapper-md" ng-controller="batchImportCtrl">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" method="get" action="#" onkeydown="if(event.keyCode==13)return false;">
                <input id="hiddenText" type="text" style="display:none" />
                <div class="panel panel-default">

                    <div class="panel-heading font-bold">
                        批量导入
                    </div>

                    <div class="panel-body">
                        <div class="step-wrapper">
                            <div class="col-md-1 body-left">
                                <div class="body-step-img">
                                    <img src="img/u50.png" alt="">
                                </div>
                                <div class="body-step-img bg">
                                    <img src="img/u28.png" alt="">
                                </div>
                                <div class="body-step-img">
                                    <img src="img/u52.png" alt="">
                                </div>
                                <div class="body-step-img bg">
                                    <img src="img/u33.png" alt="">
                                </div>
                                <div class="body-step-img">
                                    <img src="img/u52.png" alt="">
                                </div>
                                <div class="body-step-img bg">
                                    <img src="img/u38.png" alt="">
                                </div>
                                <div class="body-step-img">
                                    <img src="img/u52.png" alt="">
                                </div>
                                <div class="body-step-img bg">
                                    <img src="img/u43.png" alt="">
                                </div>
                                <div class="body-step-img">
                                    <img src="img/u58.png" alt="">
                                </div>
                                <div class="body-step-img bg">
                                    <img src="img/u48.png" alt="">
                                </div>
                            </div>
                            <div class="col-md-11 body-right">
                                <div class="step step1">
                                    <p>1.添加房型照片模板（非必须）</p>
                                    <p class="font-grey">房型可以帮助您更快导入房源的照片信息</p>
                                    <p><button type="button" class="btn-yellow" ng-click="addPicModel()">添加房型照片模板</button></p>
                                </div>
                                <div class="step step2">
                                    <p>2.下载房源导入模板</p>
                                    <p class="font-grey">下载房源导入Excel模板</p>
                                    <p><button type="button" class="btn-yellow" ng-click="downloadModel()">下载模板</button></p>
                                </div>
                                <div class="step step3">
                                    <p>3.按照模板填写房源信息</p>
                                    <p class="font-grey">根据模板提示按要求完善房源信息模板</p>
                                </div>
                                <div class="step step4" uploader="uploader">
                                    <p>4.上传并导入房源信息</p>
                                    <p class="font-grey">请选择需要导入的Excel文件</p>
                                    <p>
                                        <input type="text" ng-model="fileName">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <button type="button" class="btn-yellow" ng-click="choiseFile()">选择文件</button>
                                        <!-- <input type="file" id="choiseFile" style="display: none;" onchange="angular.element(this).scope().readFile(event)"> -->
                                    </p>
                                    <p><button type="button" class="btn-yellow" ng-click="importHouseInfo()">导入房源信息</button></p>
                                </div>
                                <div class="step step5">
                                    <p>5.补充或修改房源信息</p>
                                    <p class="font-grey">将下方列表中待补充或失败的房源完善后再次上传</p>
                                    <p><button type="button" class="btn-yellow" ng-click="importAgain()">再次导入</button></p>
                                </div>
                            </div>
                        </div>

                        <div class="upload-list-wrapper">

                        </div>

                    </div>

                    <!-- <div class="line line-dashed b-b line-lg pull-in"></div> -->

                    <div class="panel-heading text-center">
                        本次成功导入 <span class="import-success">88</span> 条房源信息，待补充 <span class="import-supplement">88</span> 条房源信息，失败 <span class="import-failure">88</span> 条房源信息。
                    </div>

                    <div class="table-responsive">
                        <table ui-jq="dataTable" ui-options="dataTableSettings"  ui-callback="initFinish" class="table table-striped m-b-none">
                            <thead>
                                <tr>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                </div>
                <!-- <button type="button" class="btn btn-addon btn-success" id='itemUpload' ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length" style="display: none;"></button> -->
                <div class="ngdialog-message" style='display:none;'>
    <div class="hbox hbox-auto-xs hbox-auto-sm" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
        <div class="col w-lg bg-light b-r bg-auto">
            <div class="wrapper-md dker b-b">
                <h3 class="m-n font-thin">文件上传</h3>
            </div>
            <div class="wrapper-md">
                <div style="position: relative;overflow: hidden;">
                    <button class="btn col-lg-10 btn-primary">选择文件</button>
                    <input type="file" nv-file-select="" uploader="uploader" id='uploaderHouseFileInput' accept="application/vnd.ms-excel" single  onchange="angular.element(this).scope().readFile(event)"/>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="wrapper-md bg-light dk b-b">
                <span class="pull-right m-t-xs">文件数: <b class="badge bg-info">{{ uploader.queue.length }}</b></span>
                <h3 class="m-n font-thin">上传队列</h3>
            </div>
            <div class="wrapper-md">
                <table class="table bg-white-only b-a">
                    <thead>
                        <tr>
                            <th width="50%">文件名</th>
                            <th ng-show="uploader.isHTML5">大小</th>
                            <th ng-show="uploader.isHTML5">进度</th>
                            <th>状态</th>
                            <th>控制</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in uploader.queue">
                            <td><strong>{{ item.file.name }}</strong></td>
                            <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                            <td ng-show="uploader.isHTML5">
                                <div class="progress progress-sm m-b-none m-t-xs">
                                    <div class="progress-bar bg-info" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
                                </div>
                            </td>
                            <td class="text-center">
                                <span ng-show="item.isSuccess" class="text-success"><i class="glyphicon glyphicon-ok"></i></span>
                                <span ng-show="item.isCancel" class="text-warning"><i class="glyphicon glyphicon-ban-circle"></i></span>
                                <span ng-show="item.isError" class="text-danger"><i class="glyphicon glyphicon-remove"></i></span>
                            </td>
                            <td nowrap>
                                <button type="button" class="btn btn-default btn-xs" ng-click="item.upload()"  ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                    上传
                                </button>
                                <button type="button" class="btn btn-default btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                    取消
                                </button>
                                <button type="button" class="btn btn-default btn-xs" ng-click="item.remove()">
                                    删除
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div>
                    <div>
                        <p>总上传进度:</p>
                        <div class="progress bg-light dker" style="">
                            <div class="progress-bar progress-bar-striped bg-info" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-addon btn-success" id='itemUpload' ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
                        <i class="fa fa-arrow-circle-o-up"></i> 全部上传
                    </button>
                    <button type="button" class="btn btn-addon btn-warning" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
                        <i class="fa fa-ban"></i> 全部取消
                    </button>
                    <button type="button" class="btn btn-addon btn-danger" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
                        <i class="fa fa-trash-o"></i> 全部删除
                    </button>
                    <!-- <p class="text-muted m-t-xl">Note: upload.php file included, files will be uploaded to "src/js/controllers/uploads".</p> -->
                </div>
            </div>
        </div>
    </div>
</div>
            </form>
        </div>
    </div>
</div>
